<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
    <p v-up-text="msg1"></p>
    <p v-lo-text="msg2"></p>
</div>

<script src="https://cdn.bootcdn.net/ajax/libs/moment.js/2.29.1/moment.js"></script>
<script src="../js/vue.js"></script>
<script>

    Vue.directive('up-text', function (el, binding) {
        el.innerText = binding.value.toUpperCase()
    })
    new Vue({
        el: '#app',
        data: {
            msg1: 'Eveling is wo D',
            msg2: 'FSDFljflsdkjf sdklfj '
        },
        directives: {
            'lo-text'(el,binding) {
                el.textContent = binding.value.toLowerCase()

            }

        }
    })
</script>
</body>
</html>